<script setup lang="ts">
import { reactive } from 'vue'
import { Swipe, SwipeItem } from 'vant';
import { useUserStore } from '@/stores/user';

import { fetchWithdrawData } from '@/api/notice';

import { mockNotice } from '@/mock'
import { encipherEmail } from '@/utils'

defineOptions({
    name: 'BiNotice'
})

const userStore = useUserStore()

interface NoticeData {
    payeeAccount: string,
    amount: string | number
}
const notice = reactive<Array<NoticeData>>(mockNotice)
fetchWithdrawData({ deviceInfo: userStore.device }).then(res => {
    notice.push(...res.data.data)
}).catch(err => {
    throw new Error(err)
})

</script>

<template>
    <div class="notice">
        <img class="notice-icon" src="@/assets/imgs/megaphone.svg" alt="notice_icon" width="20">
        <Swipe style="width: 100%;height: 5vmin;" :autoplay="2500" :vertical="true" :show-indicators="false">
            <SwipeItem v-for="(item, key) in notice" :key="key">
                <div class="notice-text">
                    <span class="notice-text_span">
                        {{ encipherEmail(item.payeeAccount) }} win
                        <span class="notice-text_span__inset">${{ item.amount }}</span>
                    </span>
                </div>
            </SwipeItem>
        </Swipe>
    </div>
    <span class="notice-tips">Pay you in full and donate 20% of AD profits to charity.</span>
</template>

<style scoped lang="scss">
@import url(./index.scss);
</style>